import React from 'react';
import 'antd/dist/antd.css';
import { Input ,Button, List} from 'antd';

//无状态组件
//当一个UI组件只有render一个函数时，可以用无状态组件进行替换，性能更高。因为UI组件是一个类在生成的时候还会生成其它的状态函数，而无状态组件不会生成。
const TodoListUI = (props)=>{
    return (
        <div style={{'marginTop':'10px','marginLeft':'10px'}}>
            <div>
                <Input 
                    placeholder="todo info" 
                    value={props.inputValue} 
                    style={{'width':'300px','marginRight':'10px'}} 
                    onChange={props.handleInputChange}
                />
                <Button type="primary" onClick={props.handleBtnClick}>提交</Button>
            </div>
            <List
                style={{marginTop:'10px',width:'300px'}}
                bordered
                dataSource={props.list}
                renderItem={(item,index)=>(<List.Item onClick={() => {props.handleItemClick(index)}}>{item}</List.Item>)}
                
            />
        </div>
    )
}

//UI组件
// class TodoListUI extends Component {
//     render(){
//         return (
//             <div style={{'marginTop':'10px','marginLeft':'10px'}}>
//                 <div>
//                     <Input 
//                         placeholder="todo info" 
//                         value={this.props.inputValue} 
//                         style={{'width':'300px','marginRight':'10px'}} 
//                         onChange={this.props.handleInputChange}
//                     />
//                     <Button type="primary" onClick={this.props.handleBtnClick}>提交</Button>
//                 </div>
//                 <List
//                     style={{marginTop:'10px',width:'300px'}}
//                     bordered
//                     dataSource={this.props.list}
//                     renderItem={(item,index)=>(<List.Item onClick={(index) => {this.props.handleItemClick(index)}}>{item}</List.Item>)}
                    
//                 />
//             </div>
//         )
//     }
// }

export default TodoListUI;